﻿<div class="demo-description">
        <h2>
            <DemoNavLink Link="Toolbar#CheckedAndRadioButtons" />Checked and Radio Buttons
        </h2>
        <p>
            A group of radio buttons enables users to select one option from a group of options. To create a group of radio buttons within the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbar">Toolbar</a>, use the same <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbarItem.GroupName">GroupName</a> property value to arrange toolbar items into a group.
        </p>
        <p>
            Similarly to radio buttons, you can define separate checked buttons that support checked and unchecked states. To create a checked button, set the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbarItem.GroupName">GroupName</a> property to a unique value. This changes the item’s state (checked/unchecked) on every user click.
        </p>
        <p>
            The list below includes the related API members:
        </p>
        <ul>
            <li>
                <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbarItem.Checked">Checked</a> - Specifies the item's checked state.
            </li>
            <li>
                <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbarItem.CheckedChanged">CheckedChanged</a> - Fires when the item’s checked state changes.
            </li>
            <li>
                <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.Base.DxToolbarItemBase.Click">Click</a> - Fires when a user clicks the item.
            </li>
        </ul>
    </div>

<div class="card demo-card">
    <div class="card-header border-0 p-2">
        <DxToolbar @key="@ThemeName">
            <Items>
                <DxToolbarItem GroupName="align" IconCssClass="tb-icon tb-icon-align-left" />
                <DxToolbarItem GroupName="align" IconCssClass="tb-icon tb-icon-align-center" />
                <DxToolbarItem GroupName="align" IconCssClass="tb-icon tb-icon-align-right" />
                <DxToolbarItem Text="Font Style" BeginGroup="true">
                    <Items>
                        <DxToolbarItem IconCssClass="tb-icon tb-icon-bold" Text="Bold" GroupName="bold" />
                        <DxToolbarItem IconCssClass="tb-icon tb-icon-italic" Text="Italic" GroupName="italic" />
                        <DxToolbarItem IconCssClass="tb-icon tb-icon-underline" Text="Underline" GroupName="underline" />
                    </Items>
                </DxToolbarItem>
            </Items>
        </DxToolbar>
    </div>
</div>
<CodeSnippet_Toolbar_ItemChecking />

@code {
    [CascadingParameter(Name = "ThemeName")] string ThemeName { get; set; }
}
